<template>
  <view>
    <web-view 
      ref="webview" 
      :src="webViewUrl" 
      @message="handleMessage"
      v-if="webViewUrl"
	  :webview-styles="webviewStyles"
    ></web-view>
    <view v-else>加载中...</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webViewUrl: '',
	  webviewStyles: {
	    progress: {
	      color: '#FF3333'
	    },
	    // 添加以下配置
	    android: {
	      hardwareAccelerated: true,
	      allowFileAccess: true,
	      allowContentAccess: true,
	      allowFileAccessFromFileURLs: true,
	      allowUniversalAccessFromFileURLs: true
	    }
	  }
    }
  },
  onLoad(options) {
    if (options.url) {
	  console.log('options.url', options.url)
      if (options.url.startsWith('http')) {
        // 处理网络图片
        this.convertNetworkImageToBase64(options.url).then(base64 => {
          this.webViewUrl = `/static/image-editor.html?imageData=${encodeURIComponent(base64)}`;
        });
      } else {
        // 处理本地图片
        this.convertLocalImageToBase64(options.url).then(base64 => {
			console.log('base64', base64);
          this.webViewUrl = `/static/image-editor.html?imageData=${encodeURIComponent(base64)}`;
        });
      }
    }
  },
  methods: {
    // 转换网络图片为Base64
    convertNetworkImageToBase64(url) {
      return new Promise((resolve, reject) => {
        uni.downloadFile({
          url: url,
          success: (res) => {
            if (res.statusCode === 200) {
              this.readFileAsBase64(res.tempFilePath, url).then(resolve).catch(reject);
            } else {
              reject(new Error('下载失败'));
            }
          },
          fail: reject
        });
      });
    },
    
    // 通用读取文件为Base64
    convertLocalImageToBase64(localPath) {
      return new Promise((resolve, reject) => {
        // 处理/static路径
        const fullPath = localPath.startsWith('/') ? localPath : `/${localPath}`;
        
        // 在App环境下使用plus.io直接读取文件
        if (fullPath.startsWith('/static/')) {
          const relativePath = fullPath.replace('/static/', '');
          
          // 方法1：使用uni.getFileInfo（推荐）
          if (uni.getFileSystemManager) {
            // 小程序环境
            uni.getFileSystemManager().readFile({
              filePath: `/static/${relativePath}`,
              encoding: 'base64',
              success: (res) => {
                const mimeType = this.getMimeType(fullPath);
                resolve(`data:${mimeType};base64,${res.data}`);
              },
              fail: (err) => {
                console.error('读取文件失败:', err);
                reject(err);
              }
            });
          } else {
            // App环境 - 使用plus.io
            plus.io.resolveLocalFileSystemURL(`_www/static/${relativePath}`, (entry) => {
              entry.file((file) => {
                const reader = new plus.io.FileReader();
                reader.onloadend = (evt) => {
                  const mimeType = this.getMimeType(fullPath);
                  // 注意：plus.io读取的结果已经是带data:URL前缀的
                  if (evt.target.result.startsWith('data:')) {
                    resolve(evt.target.result);
                  } else {
                    resolve(`data:${mimeType};base64,${evt.target.result}`);
                  }
                };
                reader.onerror = (e) => {
                  console.error('文件读取错误:', e);
                  reject(e);
                };
                reader.readAsDataURL(file);
              }, reject);
            }, reject);
          }
        } else {
          // 其他本地路径
          uni.getFileSystemManager().readFile({
            filePath: fullPath,
            encoding: 'base64',
            success: (res) => {
              const mimeType = this.getMimeType(fullPath);
              resolve(`data:${mimeType};base64,${res.data}`);
            },
            fail: reject
          });
        }
      });
    },
    
    // 根据URL获取MIME类型
    getMimeType(url) {
      url = url.toLowerCase();
      if (url.endsWith('.png')) return 'image/png';
      if (url.endsWith('.jpg') || url.endsWith('.jpeg')) return 'image/jpeg';
      if (url.endsWith('.gif')) return 'image/gif';
      if (url.endsWith('.webp')) return 'image/webp';
      return 'image/jpeg'; // 默认
    },
    
    saveImage() {
      this.$refs.webview.evalJs('saveImage()');
    },
    
	handleMessage(evt) {
		console.log('收到WebView消息:', evt);
		
		try {
			// 1. 统一提取消息数据（兼容不同平台格式）
			let messages = [];
			if (Array.isArray(evt.detail)) {
				// iOS格式（数组）
				messages = evt.detail;
			} else if (evt.detail?.data) {
				// Android格式（带data字段）
				messages = Array.isArray(evt.detail.data) ? evt.detail.data : [evt.detail.data];
			} else if (typeof evt.detail === 'string') {
				// 字符串格式（兜底处理）
				messages = JSON.parse(evt.detail) || [];
			}

			// 2. 处理每条消息
			messages.forEach(message => {
				if (!message) return;

				console.log('当前消息内容:', message.blob);
				
				// 新版消息格式：type="blob" + blob字段
				if (message.type === 'blob' && message.blob) {
					// this.saveImageToAlbum(message.blob, 'blob');
					// 发送事件
				    uni.$emit('imageEdited', { imageData: message.blob });
				    // 返回上一页
				    uni.navigateBack();
				}
				// 可以继续添加其他type类型的处理
				else if (message.type === '其他类型') {
					// 处理其他类型消息...
				}
			});

		} catch (error) {
			console.error('消息处理失败:', error);
			uni.showToast({
				title: '处理消息出错: ' + error.message,
				icon: 'none'
			});
		}
	},

	/**
	 * 保存图片到相册（专为blob格式优化）
	 * @param {string} blobData - 经过base64编码的图片数据
	 */
	async saveImageToAlbum(blobData) {
		try {
			// 1. 直接构造DataURL（因为blobToBase64已经转换过）
			const base64Data = `data:image/jpeg;base64,${blobData}`;
			
			// 2. 生成临时文件名
			const fileName = `saved_${Date.now()}.jpg`;
			const tempPath = `${plus.io.PUBLIC_DOCUMENTS}/${fileName}`;

			// 3. 写入临时文件（自动去掉DataURL前缀）
			await new Promise((resolve, reject) => {
				plus.io.writeFile({
					path: tempPath,
					data: base64Data.split(',')[1],
					encoding: 'base64',
					success: resolve,
					fail: reject
				});
			});

			// 4. 保存到系统相册
			await new Promise((resolve, reject) => {
				plus.gallery.save(tempPath, resolve, reject);
			});

			uni.showToast({
				title: '图片保存成功',
				icon: 'success'
			});

		} catch (err) {
			console.error('保存失败:', err);
			uni.showToast({
				title: '保存失败: ' + (err.message || '未知错误'),
				icon: 'none',
				duration: 3000
			});
		}
	}
  }
}
</script>